<template>
  <div class="activity-detail">
    <x-header>来人呐!<a slot="right"></a></x-header>
    <group>
      <cell title="活动名称" :value="detailObj.title"></cell>
      <cell title="活动说明"><div v-html="detailObj.content"></div></cell>
      <!-- <uploader
        :max="10"
        :images="detailObj.imgs"
        :handle-click="false"
        :show-header="false"
        :readonly="true"
        :upload-url="uploadUrl"
        name="img"
        size="small"
        @preview="previewMethod($event)">
      </uploader> -->
      <uploadImage :imglist.sync="detailObj.imgs"></uploadImage>
      <cell title="开始时间">{{formateTime(detailObj.startTime)}}</cell>
      <cell title="结束时间">{{formateTime(detailObj.endTime)}}</cell>
      <cell title="活动费用">{{detailObj.activityObj && detailObj.activityObj.fee}}</cell>
      <cell title="活动人数">{{detailObj.activityObj && detailObj.activityObj.num}}</cell>
      <cell title="活动地点">{{detailObj.activityObj && detailObj.activityObj.place}}</cell>
      <cell title="报名截止时间">{{formateTime(detailObj.activityObj && detailObj.activityObj.deadline)}}</cell>
    </group>
    <group title="评论列表" v-if="detailObj.cmts && detailObj.cmts.length">
      <cell class="comment-list" v-for="(item,i) in detailObj.cmts" :key="i">
        <div class="top">
          <div class="left">
            <avatar :username="item.creator.nickname" :src="item.creator.avatar"  :size="40"></avatar>
          </div>
          <div class="right">
            <div class="right-1">
              <div>{{item.creator.nickname || 'helllo'}}</div>
              <div>
                <span>{{getTime(item.createTime)}}</span>
                <span class="item-from">来自#{{item.category}}#</span>
              </div>
            </div>
            <div class="right-2">
              <i class="icon-dianzan"></i>
            </div>
          </div>
        </div>
        <div class="main" v-html="item.content"></div>
      </cell>
    </group>
    <x-button @click.native="doPublish" class="btn" type="primary">报名</x-button>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import Avatar from 'vue-avatar';
import { namespace } from 'vuex-class';
// import Uploader from 'vux-uploader';
import uploadImage from '../../components/UploadImage'
import moment from 'moment';
import { formatMsgTime } from '../../js/getTime'
import { upload } from '../../api/'
import {
  XHeader,
  Datetime,
  Popup,
  Group,
  XButton,
  Tab,
  TabItem,
  ButtonTab,
  ButtonTabItem,
  Confirm,
  Cell,
  Search,
  Swiper,
  Grid,
  GridItem,
  Card,
  Rater,
  XTextarea,
  XInput
} from 'vux';

const DetailStore = namespace('detail');

@Component({
  components: {
    Avatar,
    XHeader,
    Datetime,
    uploadImage,
    Popup,
    Group,
    XButton,
    Tab,
    TabItem,
    ButtonTab,
    ButtonTabItem,
    Confirm,
    Cell,
    Search,
    Swiper,
    Grid,
    GridItem,
    Card,
    Rater,
    XTextarea,
    XInput
  }
})
export default class Index extends Vue {
  @DetailStore.Action getDetail;
  @DetailStore.State detail;
  images = []
  imgEnLarge = false
  showSize = false
  imgUrl = ''
  show12 = false
  detailObj = {}
  uploadUrl = upload
  commentList = [
    { comment: '上课很好，学生出来都可以找到好工作，了不起的老师啊，是其他老师的楷模，如果都像这个老师，那中国就会更美好！' },
    { comment: '上课很好，学生出来都可以找到好工作，了不起的老师啊，是其他老师的楷模，如果都像这个老师，那中国就会更美好！' },
    { comment: '上课很好，学生出来都可以找到好工作，了不起的老师啊，是其他老师的楷模，如果都像这个老师，那中国就会更美好！' },
    { comment: '上课很好，学生出来都可以找到好工作，了不起的老师啊，是其他老师的楷模，如果都像这个老师，那中国就会更美好！' },
    { comment: '上课很好，学生出来都可以找到好工作，了不起的老师啊，是其他老师的楷模，如果都像这个老师，那中国就会更美好！' },
    { comment: '上课很好，学生出来都可以找到好工作，了不起的老师啊，是其他老师的楷模，如果都像这个老师，那中国就会更美好！' }
  ]
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
  formateTime (t) {
    if (t) {
      return moment(t * 1000).format('YYYY-MM-DD HH:mm:ss')
    }
  }
  previewMethod (e) {
    this.imgUrl = e.url;
    this.imgEnLarge = true;
  }
  handleImgEnlarge () {
    this.imgEnLarge = false;
  }
  removeImageMethod (val) {

  }
  doPublish () {
  	this.$router.push('submitpage');
  }
  getDetailInfo () {
    const params = {
      _id: this.$route.params.id
    }
    this.getDetail(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.detailObj = this.detail
      }
    })
  }
  mounted () {
    this.getDetailInfo()
  }
}
</script>
<style lang="less">
  .activity-detail {
    padding-top: 46px;
    padding-bottom: 55px;
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    .img {
      width: 100%;
    }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .btn {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .comment-list {
      // font-size: 12px;
      .weui-cell__ft {
        text-align: left;
        width: 100%;
      }
    }
    .top {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .right {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .right-1 {
        display: flex;
        flex-direction: column;
      }
      .right-2 {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .add-btn {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
    }
  }
</style>
